<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$doc.name} - 文档中心</title>
    <link rel="shortcut icon" href="/static/icon/doc_favicon.ico">
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css?v={php}echo time(){/php}">
    <link rel="stylesheet" type="text/css" href="/static/editor.md/css/editormd.preview.min.css?v={php}echo time(){/php}">
    <style type="text/css">
        .layui-header {padding: 0 20px;height: 50px !important;background-color: #fff !important;border-bottom: 1px solid #e5e5e5;}
        .layui-logo {font-size: 20px !important;line-height: 50px !important;color: #34495e !important;left: 20px !important;text-align: left !important;}
        .layui-side {top: 50px !important;width: 300px;}
        .layui-body {top: 50px !important;left: 300px !important;}
        .layui-side-scroll {overflow-y: auto;width: 300px;}
    </style>
</head>
<body>
<div class="layui-header">
    <div class="layui-logo">{$doc.name} - 共 {$chapter} 章 {$section} 节</div>
</div>
<div class="layui-side">
    <div class="layui-side-scroll">
        <div class="markdown-body editormd-preview-container" id="toc-container"></div>
    </div>
</div>
<div class="layui-body">
    <div class="layui-fluid xo-console-container xo-console-document-view">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div id="editormd-view">
                    <textarea style="display:none;">{foreach($article as $t)}{php}echo $t['content'] . "\r\n\r\n";{/php}{/foreach}</textarea>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/hplus/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/editor.md/lib/marked.min.js?v=<?php echo time();?>"></script>
<script type="text/javascript" src="/static/editor.md/lib/prettify.min.js?v=<?php echo time();?>"></script>
<script type="text/javascript" src="/static/editor.md/lib/raphael.min.js?v=<?php echo time();?>"></script>
<script type="text/javascript" src="/static/editor.md/lib/underscore.min.js?v=<?php echo time();?>"></script>
<script type="text/javascript" src="/static/editor.md/lib/sequence-diagram.min.js?v=<?php echo time();?>"></script>
<script type="text/javascript" src="/static/editor.md/lib/flowchart.min.js?v=<?php echo time();?>"></script>
<script type="text/javascript" src="/static/editor.md/lib/jquery.flowchart.min.js?v=<?php echo time();?>"></script>
<script type="text/javascript" src="/static/editor.md/editormd.js?v=<?php echo time();?>"></script>
<script type="text/javascript">
    $(function () {
        //浏览文档
        editormd.markdownToHTML("editormd-view", {
            htmlDecode: "style,script,iframe,br",
            tocm: true,
            tocContainer: "#toc-container",
            emoji: true,
            taskList: true,
            flowChart: true,
            sequenceDiagram: true
        });
        let $href = location.href
        let n = decodeURI($href.substring($href.indexOf('#') + 1));
        $('.markdown-toc-list li a').each(function (){
            if ($(this).attr('href') === ('#' + n)) {
                let t = $(this).offset().top - 50
                $('.layui-side-scroll').animate({'scrollTop': t})
            }
        })
        $('#editormd-view a').each(function (){
            if ($(this).attr('name') === n) {
                let h = $(this).offset().top - 50
                $('.layui-body').animate({'scrollTop': h})
            }
        })
    });
</script>
</html>